<script>
  import common, { Emitter, ComponentName, EventName, GetPolygonAreaCenter } from '../common.js'

  export default {
    componentName: ComponentName.marker,
    mixins: [Emitter],
    props: {
      name: {},
      layer: {},
      sources: {},
      prop: {},
      map: {},
      show: {},
      activeLayerList: {}
    },
    data() {
      return {
        position: { x: 0, y: 0 }
      }
    },
    computed: {
      currentMarker() {
        return this.layer.marker || {}
      },
      currentState() {
        return this.currentMarker.rule ? this.currentMarker.rule.call(this, this.prop) : 'default'
      },
      currentPoint() {
        let point = common.case(this.currentMarker.coordinate)
                          .string(val => _.get(this.prop, val))
                          .function(val => val.call(this, this.prop))
                          .default()
        let areaPoint = common.case(this.currentMarker.areaCenterCoordinate)
                              .string(val => this.getAreaCenter(_.get(this.prop, val)))
                              .function(val => val.call(this, this.prop))
                              .default()                  
        let coordinate = point || areaPoint 
        if (!coordinate) {
          return null
        } else {
          return common.case(coordinate)
                       .string(val => coordinate.split(','))
                       .array(val => val)
                       .object(val => ([val.x, val.y]))
                       .default()
        }
      },
      basicStyle() {
        let pointer = this.currentPoint
        if (!pointer) {
          return { display: 'none' }
        } else {
          let { x, y } = this.position
          return {
            position: 'absolute',
            left: `${x}px`,
            top: `${y}px`
          }
        }
      }
    },
    created() {
      this.updatePosition()
      this.$on(EventName.updatePosition, this.updatePosition)
    },
    methods: {
      onOpen() {
        if (this.map.isDragging || this.layer.infoWindow === false) return
        let options = {
          prop: this.prop,
          point: this.currentPoint,
          name: this.name,
          layer: this.setInfoWindowDefaultOffset ? this.setInfoWindowDefaultOffset(this.layer) : this.layer
        }
        if (typeof this.layer.infoWindow === 'function') {
          this.layer.infoWindow.call(this, options)
        } else {
          this.dispatch(ComponentName.map, EventName.openInfoWindow, options)
        }
      },
      updatePosition() {
        if (!this.show) return
        this.position = this.map.pointToPixel(...this.currentPoint)
      },
      getAreaCenter(points) {
        points = common
          .case(points)
          .string(val => {
            let arr = val.split("&");
            return arr.map(item => item.split(","));
          })
          .array(val => {
            return val.map(item => {
              return typeof item === "object" ? [item.x, item.y] : item;
            });
          })
          .default([]);
        if (points[0]) points.push(points[0]);
        return GetPolygonAreaCenter(points)
      }
    },
    watch: {
      show(val) {
        this.updatePosition()
      }
    }
  }
</script>
